<template>
  <div class="urban-base-dashboard">
    <!-- 顶部筛选区 -->
    <div class="filter-bar">
      <div class="filter-left">
        <span class="filter-label">选择省份</span>
        <select v-model="selectedProvince" @change="onProvinceChange">
          <option value="">请选择省份</option>
          <option v-for="p in provinceList" :key="p" :value="p">{{ p }}</option>
        </select>
        <span class="filter-label">选择城市</span>
        <select
          v-model="selectedCity"
          :disabled="!selectedProvince"
          @change="onCityChange"
        >
          <option value="">请选择城市</option>
          <option v-for="c in cityList" :key="c" :value="c">{{ c }}</option>
        </select>
        <span class="filter-label">选择时间</span>
        <input
          type="date"
          class="date-input"
          v-model="dateRange[0]"
          @change="onDateChange"
        />
        <span>~</span>
        <input
          type="date"
          class="date-input"
          v-model="dateRange[1]"
          @change="onDateChange"
        />
      </div>
      <div class="filter-right">
        <button
          v-for="(btn, idx) in timeButtons"
          :key="btn.label"
          class="filter-btn"
          :class="{ active: selectedTimeBtn === idx }"
          @click="onTimeBtnClick(idx)"
        >
          {{ btn.label }}
        </button>
      </div>
    </div>

    <div class="section-title">城镇基地数据排行</div>
    <div class="stats-cards">
      <div
        class="stat-card"
        v-for="(item, idx) in stats.rank"
        :key="idx"
        :class="['rank', 'rank-' + (idx + 1)]"
      >
        <div class="rank-circle">{{ idx + 1 }}</div>
        <div class="info">
          <div class="value">{{ formatNumber(item.value) }}</div>
          <div class="unit">**乡镇</div>
        </div>
      </div>
    </div>

    <div class="divider"></div>

    <div class="charts-section">
      <!-- 左侧：饼图及筛选 -->
      <div class="chart-block">
        <div class="chart-header">
          <span class="chart-title">城镇基地占比图</span>
        </div>
        <div class="chart-content">
          <div ref="pieChartRef" class="chart-echarts pie"></div>
          <div class="legend-block">
            <div class="legend-title">图例</div>
            <ul class="legend-list">
              <li class="legend-item" v-for="item in pieData" :key="item.name">
                <span
                  class="legend-color"
                  :style="{ background: item.itemStyle.color }"
                ></span
                >{{ item.name }}
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 右侧：折线图及筛选 -->
      <div class="chart-block">
        <div class="chart-header">
          <span class="chart-title">城镇基地走势图</span>
          <div class="chart-filters">
            <select v-model="selectedTown" @change="onTownChange">
              <option value="">请选择基地</option>
              <option v-for="t in townList" :key="t" :value="t">{{ t }}</option>
            </select>
          </div>
        </div>
        <div class="chart-content">
          <div class="y-axis-label">基地数</div>
          <div ref="lineChartRef" class="chart-echarts line"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";

// 优化后的多维静态数据源
const staticData = {
  江苏省: {
    南京市: {
      近30天: {
        rank: [
          { value: 123_456, name: "阳光镇" },
          { value: 98_765, name: "绿洲镇" },
          { value: 87_654, name: "丰收镇" },
          { value: 76_543, name: "希望镇" },
        ],
        pie: [
          { value: 40_000, name: "阳光镇", itemStyle: { color: "#f5222d" } },
          { value: 30_000, name: "绿洲镇", itemStyle: { color: "#1890ff" } },
          { value: 20_000, name: "丰收镇", itemStyle: { color: "#52c41a" } },
          { value: 10_000, name: "希望镇", itemStyle: { color: "#faad14" } },
        ],
        line: [800, 900, 850, 950, 1200, 1300, 1280, 1250],
        townList: ["阳光镇", "绿洲镇", "丰收镇", "希望镇"],
      },
      近7天: {
        rank: [
          { value: 100_000, name: "阳光镇" },
          { value: 90_000, name: "绿洲镇" },
          { value: 80_000, name: "丰收镇" },
          { value: 70_000, name: "希望镇" },
        ],
        pie: [
          { value: 30_000, name: "阳光镇", itemStyle: { color: "#f5222d" } },
          { value: 25_000, name: "绿洲镇", itemStyle: { color: "#1890ff" } },
          { value: 15_000, name: "丰收镇", itemStyle: { color: "#52c41a" } },
          { value: 10_000, name: "希望镇", itemStyle: { color: "#faad14" } },
        ],
        line: [600, 700, 750, 800, 900, 950, 980, 1000],
        townList: ["阳光镇", "绿洲镇", "丰收镇", "希望镇"],
      },
    },
    苏州市: {
      近30天: {
        rank: [
          { value: 80_000, name: "阳光镇" },
          { value: 70_000, name: "绿洲镇" },
          { value: 60_000, name: "丰收镇" },
          { value: 50_000, name: "希望镇" },
        ],
        pie: [
          { value: 20_000, name: "阳光镇", itemStyle: { color: "#f5222d" } },
          { value: 15_000, name: "绿洲镇", itemStyle: { color: "#1890ff" } },
          { value: 10_000, name: "丰收镇", itemStyle: { color: "#52c41a" } },
          { value: 5_000, name: "希望镇", itemStyle: { color: "#faad14" } },
        ],
        line: [200, 300, 400, 500, 600, 700, 800, 900],
        townList: ["阳光镇", "绿洲镇", "丰收镇", "希望镇"],
      },
      近7天: {
        rank: [
          { value: 70_000, name: "阳光镇" },
          { value: 60_000, name: "绿洲镇" },
          { value: 50_000, name: "丰收镇" },
          { value: 40_000, name: "希望镇" },
        ],
        pie: [
          { value: 15_000, name: "阳光镇", itemStyle: { color: "#f5222d" } },
          { value: 10_000, name: "绿洲镇", itemStyle: { color: "#1890ff" } },
          { value: 5_000, name: "丰收镇", itemStyle: { color: "#52c41a" } },
          { value: 2_000, name: "希望镇", itemStyle: { color: "#faad14" } },
        ],
        line: [100, 200, 300, 400, 500, 600, 700, 800],
        townList: ["阳光镇", "绿洲镇", "丰收镇", "希望镇"],
      },
    },
  },
  浙江省: {
    杭州市: {
      近30天: {
        rank: [
          { value: 150_000, name: "阳光镇" },
          { value: 140_000, name: "绿洲镇" },
          { value: 130_000, name: "丰收镇" },
          { value: 120_000, name: "希望镇" },
        ],
        pie: [
          { value: 50_000, name: "阳光镇", itemStyle: { color: "#f5222d" } },
          { value: 40_000, name: "绿洲镇", itemStyle: { color: "#1890ff" } },
          { value: 30_000, name: "丰收镇", itemStyle: { color: "#52c41a" } },
          { value: 20_000, name: "希望镇", itemStyle: { color: "#faad14" } },
        ],
        line: [1000, 1200, 1300, 1400, 1500, 1600, 1700, 1800],
        townList: ["阳光镇", "绿洲镇", "丰收镇", "希望镇"],
      },
      近7天: {
        rank: [
          { value: 140_000, name: "阳光镇" },
          { value: 130_000, name: "绿洲镇" },
          { value: 120_000, name: "丰收镇" },
          { value: 110_000, name: "希望镇" },
        ],
        pie: [
          { value: 40_000, name: "阳光镇", itemStyle: { color: "#f5222d" } },
          { value: 30_000, name: "绿洲镇", itemStyle: { color: "#1890ff" } },
          { value: 20_000, name: "丰收镇", itemStyle: { color: "#52c41a" } },
          { value: 10_000, name: "希望镇", itemStyle: { color: "#faad14" } },
        ],
        line: [800, 900, 1000, 1100, 1200, 1300, 1400, 1500],
        townList: ["阳光镇", "绿洲镇", "丰收镇", "希望镇"],
      },
    },
  },
};
function formatNumber(n: number) {
  return n.toLocaleString();
}

const timeButtons = [
  { label: "近30天", range: ["2024-05-01", "2024-05-30"] },
  { label: "近7天", range: ["2024-05-24", "2024-05-30"] },
  { label: "上周", range: ["2024-05-20", "2024-05-26"] },
  { label: "上月", range: ["2024-04-01", "2024-04-30"] },
];
const selectedTimeBtn = ref(0);
const dateRange = ref([timeButtons[0].range[0], timeButtons[0].range[1]]);

const provinceList = ["江苏省", "浙江省"];
const cityMap = {
  江苏省: ["南京市", "苏州市"],
  浙江省: ["杭州市"],
};
const selectedProvince = ref("");
const cityList = ref<string[]>([]);
const selectedCity = ref("");

const townList = ref<string[]>([]);
const selectedTown = ref("");

const stats = reactive({
  rank: [
    { value: 100000, name: "阳光镇" },
    { value: 90000, name: "绿洲镇" },
    { value: 80000, name: "丰收镇" },
    { value: 70000, name: "希望镇" },
  ],
});
const pieData = ref([
  { value: 30, name: "阳光镇", itemStyle: { color: "#f5222d" } },
  { value: 25, name: "绿洲镇", itemStyle: { color: "#1890ff" } },
  { value: 20, name: "丰收镇", itemStyle: { color: "#52c41a" } },
  { value: 15, name: "希望镇", itemStyle: { color: "#faad14" } },
]);
const lineData = ref([800, 900, 850, 950, 1200, 1300, 1280, 1250]);
const lineYears = [
  "2008年",
  "2009年",
  "2010年",
  "2011年",
  "2012年",
  "2013年",
  "2014年",
  "2015年",
];

const pieChartRef = ref<HTMLDivElement | null>(null);
const lineChartRef = ref<HTMLDivElement | null>(null);
let pieChart: echarts.ECharts | null = null;
let lineChart: echarts.ECharts | null = null;

function renderPie() {
  if (pieChartRef.value) {
    if (!pieChart) pieChart = echarts.init(pieChartRef.value);
    pieChart.setOption({
      tooltip: { trigger: "item" },
      legend: { show: false },
      series: [
        {
          name: "城镇基地占比",
          type: "pie",
          radius: "70%",
          center: ["50%", "50%"],
          label: { formatter: "{b}\n{c} ({d}%)", fontSize: 14 },
          data: pieData.value,
        },
      ],
    });
  }
}
function renderLine() {
  if (lineChartRef.value) {
    if (!lineChart) lineChart = echarts.init(lineChartRef.value);
    lineChart.setOption({
      tooltip: { trigger: "axis" },
      xAxis: {
        type: "category",
        data: lineYears,
        axisLine: { lineStyle: { color: "#e0e0e0" } },
        axisLabel: { color: "#888" },
      },
      yAxis: {
        type: "value",
        name: "基地数",
        axisLine: { lineStyle: { color: "#e0e0e0" } },
        axisLabel: { color: "#888" },
        splitLine: { lineStyle: { color: "#f0f0f0" } },
      },
      series: [
        {
          name: selectedTown.value || "阳光镇",
          type: "line",
          data: lineData.value,
          smooth: true,
          lineStyle: { color: "#1890ff", width: 3 },
          itemStyle: { color: "#1890ff" },
          areaStyle: { color: "rgba(24,144,255,0.08)" },
        },
      ],
    });
  }
}

function onTimeBtnClick(idx: number) {
  selectedTimeBtn.value = idx;
  dateRange.value = [...timeButtons[idx].range];
  refreshData();
}
function onDateChange() {
  selectedTimeBtn.value = -1;
  refreshData();
}
function onProvinceChange() {
  cityList.value = selectedProvince.value
    ? cityMap[selectedProvince.value]
    : [];
  selectedCity.value = "";
  refreshData();
}
function onCityChange() {
  refreshData();
}
function onTownChange() {
  refreshData();
}

function refreshData() {
  // 获取当前筛选条件
  const province = selectedProvince.value || "江苏省";
  const city =
    selectedCity.value || (cityMap[province] ? cityMap[province][0] : "南京市");
  const timeLabel =
    selectedTimeBtn.value >= 0
      ? timeButtons[selectedTimeBtn.value].label
      : "近30天";

  let data = staticData[province]?.[city]?.[timeLabel] ||
    staticData[province]?.[city]?.["近30天"] || {
      rank: [],
      pie: [],
      line: [],
      townList: [],
    };
  stats.rank = data.rank;
  pieData.value = data.pie;
  lineData.value = data.line;
  townList.value = data.townList;
  renderPie();
  renderLine();
}

onMounted(() => {
  cityList.value = [];
  renderPie();
  renderLine();
});

watch(
  [selectedProvince, selectedCity, selectedTimeBtn, selectedTown],
  refreshData
);

onBeforeUnmount(() => {
  pieChart && pieChart.dispose();
  lineChart && lineChart.dispose();
});
</script>

<style scoped>
.urban-base-dashboard {
  padding: 24px;
}

.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding: 16px 24px;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.filter-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.filter-label {
  font-size: 14px;
  color: #666;
}

.date-input {
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
  width: 100px;
}

.filter-right {
  display: flex;
  gap: 10px;
}

.filter-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: #e0e0e0;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.filter-btn:hover {
  background: #d0d0d0;
}

.filter-btn.active {
  background: #1890ff;
  color: white;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
  padding-left: 10px;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.rank-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #1890ff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
}

.rank-circle.rank-1 {
  background: #faad14;
}
.rank-circle.rank-2 {
  background: #1890ff;
}
.rank-circle.rank-3 {
  background: #52c41a;
}

.info {
  display: flex;
  flex-direction: column;
}

.value {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.unit {
  font-size: 14px;
  color: #666;
}

.divider {
  height: 1px;
  background: #f0f0f0;
  margin: 32px 0;
}

.charts-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.chart-block {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.chart-content {
  position: relative;
  height: 300px;
}

.chart-echarts {
  width: 100%;
  height: 100%;
}

.legend-block {
  position: absolute;
  top: 0;
  right: 0;
  background: white;
  padding: 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.legend-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 10px;
}

.legend-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 8px;
}

.y-axis-label {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
  font-size: 14px;
  color: #666;
  z-index: 10;
}

@media (max-width: 768px) {
  .filter-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .filter-left {
    width: 100%;
    flex-wrap: wrap;
  }

  .filter-right {
    width: 100%;
    justify-content: center;
  }

  .charts-section {
    grid-template-columns: 1fr;
  }
}
</style> 